<template>
    <div :class="['inputbar',{'inputbar-move-to-bottom':CountMsg>1||chooseView!='chat'}]" id="inputbar">
    <!-- <div class="inputbar" id="inputbar"> -->
        <div class="inputinfo" id="inputinfo">
            <h3>输入消息</h3>
            <input id="inputText" type="text" v-model="inputMessage">
            <nav>
                <!-- 每当点击发送消息按钮，自动回到聊天界面 -->
                <router-link to="/">
                    <el-button type="info" v-on:click="sendPostMessageToApp">发送</el-button>
                </router-link>
            </nav>
        </div>
        <div ip="router-button-part" class="router-button-part">
        <!-- 跳转标签 -->
        <nav class="nav-router">
            <router-link to="/">
                <el-button type="success" class="el-button-router" @click="chooseClick('chat')">聊天</el-button>
            </router-link> |
            <router-link to="/about">
                <el-button type="success" class="el-button-router" @click="chooseClick('about')">酒店信息</el-button>
            </router-link> |
            <router-link to="/reservation">
                <el-button type="success" class="el-button-router" @click="chooseClick('reservation')">预定房间</el-button>
            </router-link> |
            <router-link to="/checkOut">
                <el-button type="success" class="el-button-router" @click="chooseClick('checkOut')">退房</el-button>
            </router-link> |
            <router-link to="/checkOutLater">
                <el-button type="success" class="el-button-router" @click="chooseClick('check-out-later')">延迟退房</el-button>
            </router-link> 
        </nav>
        </div>
    </div>
</template>


<script setup>
// axios数据库工具，需要npm install axios
//import axios from "axios";
/*axios.get(url).then(result=>{
    console.log(result.headers);
})
.catch(err=>{
    console.log(err);
})*/
</script>


<script>
import { createApp } from 'vue'
createApp({
    mounted(){
        //滚动条监听事件（用来将标题固定在屏幕顶部）
        window.addEventListener('scroll', this.handleScroll)
    },
    methods:{
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // console.log(scrollTop)
            var offsetTop = document.querySelector('#searchBar').offsetTop
            if (scrollTop > offsetTop) {
                this.searchBarFixed = true
            } else {
                this.searchBarFixed = false
            }
        },
    },
    //清除页面时解除监听事件
    unmounted () {
        window.removeEventListener('scroll', this.handleScroll)
    },
})

import { ElButton } from 'element-plus'
// import router from '@/router'
import axios from 'axios'
export default {
    name: "inputBar",
    components: {
        ElButton,
    },  
    data(){
        return{
            inputMessage:"",
            chooseView: 'chat',
            postedMessage:{
                type:"0",
                message:"",
                request:'default',
            },
            receivedMessage:{
                type:"1",
                message:"",
                request:"default",
            },
        }
    },
    mounted() {
        // 在组件挂载后添加键盘事件监听
        window.addEventListener('keyup', this.handleKeyPress);
    },  
    computed:{
        //将../store/index.js中聊天记录的数量转到CountMsg中，进行输入框位置的渲染
        CountMsg(){
            return this.$store.getters.getCountMessages;
        }
    },
    methods:{
        //被点击的router按钮，用来辅助inputbar位置的渲染
        chooseClick(c){
            this.chooseView=c;
        },

        //将子组件inputbar的消息传输给store，并向大模型发送消息
        sendPostMessageToApp(){
            if(this.inputMessage.length > 0){
                this.postedMessage.message=this.inputMessage;
                //向store保存用户输入消息
                this.$store.dispatch('sendMessage',{
                        text: this.postedMessage.message,
                        receiver: false,
                        request: this.postedMessage.request,
                    });
                //再给后端传
                this.search(this.postedMessage,this.receivedMessage);
            }
            //清除文本框的内容
            this.inputMessage="";
            this.postedMessage.message="";
        },

        //向后端get大模型的对话消息
        search(postMsg,receiveMsg){
            let url="http://localhost:8000/chat";
            axios.post(url,{message:postMsg.message})
                .then(result=>{
                    receiveMsg.value=result.data;
                    console.log(receiveMsg.value);
                    this.receivedMessage.message=receiveMsg.value.response;
                    if(receiveMsg.value.code==2)
                        this.receivedMessage.request=receiveMsg.value.intent;
                    
                    //向store保存chat返回的聊天消息
                    this.$store.dispatch('sendMessage',{
                        text: this.receivedMessage.message,
                        receiver: this.receivedMessage.type=='1',
                        request: this.receivedMessage.request,
                    });
                })
                .catch(err=>{
                    console.log(err);
                })            
        },
        
        //enter键触发函数
        handleKeyPress(event) {
            // 检查按键是否为 'Enter'，按下时触发消息发送函数，并跳转到chat界面
            if (event.key === 'Enter') {
                // console.log('key Enter pressed');
                if(this.inputMessage.length>0){
                    this.sendPostMessageToApp(); 
                    this.chooseView='chat';
                    this.$router.push('/');  
                }
            }
        },
    }
}
</script>


<style scoped>
.inputbar{
    position: absolute;
    background-color: rgb(215, 255, 215);
    bottom: 20%;
    left: 50%;
    width: 100%;
    height: 18%;
    border-radius: 10px 50px / 10px 15px;
    transform: translate(-50%, -50%);
    transition: top 0.5s, left 0.5s, bottom 0.5s; /* 添加过渡效果 */
    z-index: 5;/*覆盖优先度 */
}
.inputbar-move-to-bottom{
    position: fixed;
    background-color: rgb(215, 255, 215);
    bottom: -9%;
    left: 50%;
    width: 100%;
    height: 18%;
    z-index: 5;/*覆盖优先度 */
}
.router-button-part{
  justify-items: center;
  position: fixed;
  height: 10%;
  width: 100vw;
  background-color: rgb(215, 255, 215);
}
.inputinfo{
    display: flex;
    align-items: center;
    justify-content: center;
}
.el-button-router{
  width: 15vw;
}

h3{
    margin-right: 2%;
}

input{
    margin-right: 2%;
    height: 20pt;
    width: 50vw;
}

.nav-router {
  padding: 8px;
}

.nav-router a {
  font-weight: bold;
  color: #2c3e50;
}

.nav-router a.router-link-exact-active {
  color: #42b983;
}
</style>



 
  
 

